import TimePicker from "ant-design-vue/es/time-picker";
import "ant-design-vue/lib/time-picker/style/css";

import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
export default {
  name: "FormTimeRangePicker",
  props: {
    option: {
      type: Object,
      default() {
        return {};
      }
    },
    value: [Array, String]
  },
  model: {
    prop: "value",
    event: "updata"
  },
  data() {
    return {
      minTime: "",
      maxTime: "",
      startHour: "",
      startMinutes: "",
      startSeconds: ""
    };
  },
  computed: {
    startValue() {
      let start = "";
      if (this.value && this.value.length) {
        let start = this.value[0];
        if (typeof start === "string") {
          start = moment(start, this.format);
        } else {
          return start;
        }
      }
      return start;
    },
    endValue() {
      let end = "";
      if (this.value && this.value.length > 1) {
        let end = this.value[1];
        if (typeof end === "string") {
          end = moment(end, this.format);
        } else {
          return end;
        }
      }
      return end;
    }
  },
  watch: {
    endValue() {
      this.setDisabledStartTime();
    }
  },
  created() {
    this.format = this.option.format ? this.option.format : "HH:mm";
  },
  methods: {
    onChange() {
      // this.cvalue = value;
      let value = [];
      if (this.minTime.valueOf() > this.maxTime.valueOf() && this.maxTime) {
        this.maxTime = "";
      }
      if (this.minTime) {
        value.push(this.minTime);
      }
      if (this.maxTime) {
        value.push(this.maxTime);
      }
      this.$emit("updata", value);
      this.$emit("change", value);
      this.setDisabledStartTime();
    },
    onStartChange(e) {
      this.minTime = e;
      this.onChange();
    },
    onEndChange(e) {
      this.maxTime = e;
      this.onChange();
    },
    // startDisabledDate(current) {
    //   if (this.maxTime && current) {
    //     return current > this.maxTime || (this.min && current < this.min);
    //   } else if (this.min || this.max) {
    //     return current < this.min || current > this.max;
    //   }
    // },
    // endDisabledDate(current) {
    //   debugger;
    //   if (this.minTime && current) {
    //     return current < this.minTime || (this.max && current > this.max);
    //   } else if (this.min || this.max) {
    //     return current < this.min || current > this.max;
    //   }
    // },
    //设置禁用时间的小时和分钟、秒
    setDisabledStartTime() {
      this.startHour = this.startValue && this.startValue.hour();
      const endHour = this.endValue && this.endValue.hour();
      if (endHour > this.startHour) {
        this.startMinutes = 0;
        this.startSeconds = 0;
      } else {
        this.startMinutes = this.startValue && this.startValue.minute();
        this.startSeconds = this.startValue && this.startValue.second();
      }
    },
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
    setFocus(is) {
      if (is) {
        this.$refs.formInput.focus();
      } else {
        this.$refs.formInput.blur();
      }
    }
  },
  render() {
    const start = {
      props: {
        format: this.format,
        ...this.option.props
      },
      style: {
        width: "100%"
      },
      on: {
        change: e => {
          this.onStartChange(e);
        }
      }
    };

    if (this.startValue) {
      start.props.value = this.startValue;
    }
    const end = {
      props: {
        format: this.format,
        ...this.option.props,
        disabledHours: () => {
          return this.range(0, this.startHour);
        },
        disabledMinutes: () => {
          return this.range(0, this.startMinutes);
        },
        disabledSeconds: () => {
          return this.range(0, this.startSeconds);
        }
      },
      style: {
        width: "100%"
      },
      on: {
        openChange: () => {
          this.setDisabledStartTime();
        },
        change: e => {
          this.onEndChange(e);
        }
      }
    };
    if (this.endValue) {
      end.props.value = this.endValue;
    }
    return (
      <div class="date-range-picker">
        <div class="item">
          <TimePicker {...start} />
        </div>
        <div class="fh"> - </div>
        <div class="item">
          <TimePicker {...end} />
        </div>
      </div>
    );
  }
};
